<template>
  <view class="login-container">
    <view class="login-header">
      <text class="login-title">用户登录</text>
    </view>
    
    <view class="login-form">
      <view class="input-item">
        <view class="input-label">用户名</view>
        <u--input 
          v-model="loginForm.username" 
          placeholder="请输入用户名" 
          border="surround"
          clearable
        />
      </view>
      
      <view class="input-item">
        <view class="input-label">密码</view>
        <u--input 
          v-model="loginForm.password" 
          type="password"
          placeholder="请输入密码" 
          border="surround"
          clearable
        />
      </view>
      
      <view class="remember-me">
        <u-checkbox 
          v-model="loginForm.remember" 
          shape="circle"
        >
          记住我
        </u-checkbox>
      </view>
      
      <view class="login-btn">
        <u-button 
          type="primary" 
          shape="circle" 
          @click="handleLogin"
          :loading="loading"
          :disabled="loading"
        >
          {{ loading ? '登录中...' : '登录' }}
        </u-button>
      </view>
      
      <view class="register-link">
        <u-button 
          type="info" 
          plain 
          shape="circle" 
          @click="toRegister"
        >
          立即注册
        </u-button>
      </view>
    </view>
    
    <view class="login-footer">
      <text class="footer-text">© 2025 农机通</text>
    </view>
    
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      loginForm: {
        username: '',
        password: '',
        remember: false
      }
    }
  },
  methods: {
    // 登录处理
    handleLogin() {
      // 表单验证
      if (!this.loginForm.username) {
        this.$refs.uToast.show({
          message: '请输入用户名',
          type: 'warning',
          position: 'center'
        })
        return
      }
      
      if (!this.loginForm.password) {
        this.$refs.uToast.show({
          message: '请输入密码',
          type: 'warning',
          position: 'center'
        })
        return
      }
      
      // 模拟登录过程
      this.loading = true
      
      // 模拟网络请求
      setTimeout(() => {
        this.loading = false
        
        // 模拟登录成功
        this.$refs.uToast.show({
          message: '登录成功',
          type: 'success',
          position: 'center'
        })
        
        // 跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 1000)
      }, 1500)
    },
    
    // 跳转到注册页面
    toRegister() {
      uni.navigateTo({
        url: '/pages/njt/user-register'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  padding: 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.login-header {
  text-align: center;
  margin: 80rpx 0 60rpx;
}

.login-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.login-form {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  flex: 1;
}

.input-item {
  margin-bottom: 30rpx;
}

.input-label {
  margin-bottom: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.remember-me {
  margin-bottom: 40rpx;
  
  ::v-deep .u-checkbox {
    font-size: 28rpx;
    color: #666;
  }
}

.login-btn {
  margin-bottom: 20rpx;
}

.register-link {
  ::v-deep .u-button {
    border-color: #3c9cff;
    color: #3c9cff;
  }
}

.login-footer {
  text-align: center;
  margin-top: 40rpx;
}

.footer-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 24rpx;
}
</style>
